<template>
  <div id="regis">
    <div class="login-top">
      <img src="	http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="" />
      <p>欢迎登陆</p>
      <span class="entry" @click="entry">进入网站首页<i class="iconfont el-icon-arrow-right"></i
        ><i class="iconfont el-icon-arrow-right"></i
      ></span>
    </div>
    <div class="form">
      <!-- 账号密码框的外层form开始 -->
      <div class="login-denglu">
        <h3>账户登录</h3>
        <el-form
          :model="ruleForm"
          status-icon
          ref="pasdForm"
          class="demo-ruleForm"
        >
          <!-- 账号框 -->
          <el-form-item prop="user">
            <el-input
              type="text"
              v-model="ruleForm.account"
              autocomplete="off"
              placeholder="用户名"
            ></el-input>
          </el-form-item>

          <!-- 密码框 -->
          <el-form-item prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 账号密码框的外层form结束 -->

        <!-- 登录按钮 -->
        <el-button type="primary" class="el-button" @click="btn()"
          >登录</el-button
        >
      </div>
    </div>
    <div class="footer">
      <img src="../../assets/login/login-footer.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import { Login, aaaa } from "../../api/user";
export default {
  name: "RegiSter",
  data() {
    return {
      activeName: "code",
      ruleForm: {
        account: "xiaotuxian001",
        password: "123456",
      },
      rules: {
        input2: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    btn() {
      let formName = null;
      if (this.activeName === "code") {
        formName = this.$refs["pasdForm"];
      }
      formName.validate((valid) => {
        if (valid) {
          this.logins();
          this.$message({
            message: "登录成功",
            type: "success",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    logins() {
      let obj = {
        account: this.ruleForm.account,
        password: this.ruleForm.password,
      };
      Login(obj).then((res) => {
        console.log(res);
        this.$store.commit("login/setUser", res.data.result.token);
        this.$router.push("/NaviGation");
      });
    },
    // 有问题
    entry(){
      console.log(23);
      this.$router.push("/NaviGation/HomePage")
    }
  },
  async created() {
    let res = await aaaa();
    console.log(res);
  },
};
</script>

<style scoped lang="scss">
.login-top {
  width: 1240px;
  height: 132px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  img {
    width: 200px;
    height: 132px;
  }
  p {
    font-size: 24px;
    margin-top: 61px;
    margin-left: 20px;
    height: 33px;
    color: #666;
  }
}
.form {
  height: 488px;
  background: url("http://erabbit.itheima.net/img/login-bg.696efec3.png")
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login-denglu {
    width: 300px;
    height: 400px;
    padding: 0 40px;
    background: #fff;
    position: absolute;
    top: 54px;
    right: 18%;
    h3 {
      font-size: 18px;
      color: #27ba9b;
      text-align: center;
      line-height: 55px;
      border-bottom: 1px solid #ccc;
    }
    .el-form {
      margin-top: 30px;
    }
    .el-button {
      width: 300px;
      height: 40px;
      background: #27ba9b;
    }
  }
}
.footer {
  width: 100vw;
  height: 159px;
  img {
    width: 100%;
    height: 100%;
  }
}

.entry i {
  font-size: 14px;
  color: #27ba9b;
  letter-spacing: -5px;
}

.entry {
  width: 120px;
  margin-bottom: 38px;
  font-size: 16px;
  position: absolute;
  right:250px;
  top:60px;
  cursor: pointer;
}
</style>